<script setup>
import Nav_bottom from "../../components/navigation/bottom/nav_bottom.vue";
// import { goCallElevator, goCarpooling, goGuestInvitation, goPayment, goRentandsell, goPropertyRepair, gocomplaints } from'../../tools/go.js';
import {getMenu, getCommunity_AFAB_menu, getCommunity_BJFW_menu} from "../../api/community/index.js";
import Menu_item from "../../components/menu/menu_item.vue";
import {ref} from "vue"
import {baseUrl} from "../../api/http";

const listui = ref([])
const listnum = ref([])
const listnum2 = ref([])

const zhihuiwuye = () => {
  getMenu().then(res => {
    listui.value = res.data
    // console.log(listui);
  })
}

const zhihuifuwu = () => {
  getCommunity_AFAB_menu().then(res => {
    listnum.value = res.data
    console.log(listnum);
  })
}

const zhinengfuwu = () => {
  getCommunity_BJFW_menu().then(res => {
    listnum2.value = res.data
    // console.log(listnum2);
  })
}

const init = () => {
  zhihuiwuye()
  zhihuifuwu()
  zhinengfuwu()
}

init()



</script>

<template>
  <view class="back">
    <view class="box-body">
      <view class="content w">
        <h3>智慧物业</h3>
        <view class="box">
          <ul>
            <!--  @click="handleItemClick(item) -->
            <li v-for="item in listui" :key="item.id">
              <Menu_item :img="item.img" :text="item.text" :href="item.href"></Menu_item>
            </li>
          </ul>
        </view>
      </view>
      <!--  智慧服务     -->
      <view class="content w">
        <h3>安防安保</h3>
        <view class="box">
          <ul>
            <li v-for="item in listnum" :key="item.id">
              <Menu_item :img="item.img" :text="item.text" :href="item.href"></Menu_item>
            </li>
          </ul>
        </view>
      </view>
      <!--  智能服务   -->
      <view class="content w">
        <h3>便捷服务</h3>
        <view class="box">
          <ul>
            <li v-for="(item) in listnum2" :key="item.id" >
              <Menu_item :img="item.img" :text="item.text" :href="item.href"></Menu_item>
            </li>
          </ul>
        </view>
      </view>
    </view>
    <!--底部导航栏-->
  </view>

  <nav_bottom who-active="小区"></nav_bottom>
</template>

<style scoped lang="scss">
@use "../../static/css/main";

.back {
  @include main.useTheme() {
    //底部导航栏

    .footer {
      ul {
        li {
          a {
            text:nth-child(1) {
              color: #c51d26;
            }

            text {
              font-size: 17px;
              color: #000000;
            }

            img {
              width: 30px;
              height: 30px;
            }

            display: flex;
            flex-direction: column;
            align-items: center;
          }

          flex: 1;
        }

        //
        display: flex;
        align-items: center;
        margin-top: 5px;
      }

      width: 100%;
      height: 60px;
      bottom: 0;
      background: #ffffff;
      position: fixed;
    }

    .box-body {
      .content {
        //box盒子样式
        .box {
          ul {
            li {
              a {
                text {
                  color: main.getVal(primary_text_color);
                  font-size: 14px;
                }

                img {
                  width: 50px;
                  height: 50px;
                }

                display: flex;
                flex-direction: column;
                align-items: center;
              }

              cursor: pointer;
              transition: transform 0.2s;

              &:hover {
                transform: translateY(-2px);
              }

              &:active {
                transform: translateY(1px);
              }
            }

            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            font-size: 14px;
          }

          background: main.getVal(primary_bg_color);
          border-radius: 12px;
          padding: 15px;
        }

        h3 {
          font-size: 20px;
          font-weight: 400;
          margin-bottom: 15px;
          margin-left: 10px;
          color: main.getVal(primary_text_color);
        }

        border-radius: 12px;
        margin-top: 15px;
      }

      width: 100%;
      min-height: 100VH;
      display: flow-root;
      background: main.getVal(two_lv_bg_color);
      padding-bottom: 100px;
    }
    .w {
      width: 95%;
      margin: 0 auto;
    }
    * {
      text-decoration: none;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .box-body::-webkit-scrollbar {
      display: none;
    }

    .active {
      color: #c51d26;
    }
  }
}

body::-webkit-scrollbar {
  display: none;
}
</style>